<template>
  <div id="app">
    <!-- 左侧菜单栏 -->
    <div class="sidebar">
      <div class="logo">南交飞送</div>
      <ul class="menu">
        <menu-item
            v-for="(item, index) in menuItems"
            :key="index"
            :item="item"
            :depth="0"
            @select="changeMenu"
        ></menu-item>
      </ul>
    </div>

    <!-- 右侧内容区 -->
    <div class="main-content">
      <div class="header">
        <h2>{{ currentMenu.title }}</h2>
        <div class="user-profile">
          <el-dropdown>
            <div class="user-avatar">
              <el-avatar :size="36" :src="user.avatar || require('@/assets/logo.png')"/>
              <span class="user-name">{{ user.name || '未登录' }}</span>
            </div>
            <el-dropdown-menu slot="dropdown">
<!--              <el-dropdown-item @click.native="goProfile">个人中心</el-dropdown-item>-->
              <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="content">
        <component :is="currentMenu.component"></component>
      </div>
    </div>
  </div>
</template>

<script>
import ServiceArea from '@/page/ServiceArea.vue'
import DeliveryPoints from '@/page/DeliveryPoints.vue'
import MerchantPage from '@/page/MerchantPage.vue'
import MenuItem from './components/MenuItem.vue'
import GoodPage from "@/page/GoodPage.vue";
import UserPage from "@/page/UserPage.vue";
import BillPage from "@/page/BillPage.vue";
import OrderPage from "@/page/OrderPage.vue";
import RolePage from "@/page/RolePage.vue";
import MgmtUserPage from "@/page/MgmtUserPage.vue";


export default {
  name: 'App',
  components: {
    ServiceArea,
    MerchantPage,
    MenuItem
  },
  data() {
    return {
      user: {
        name: '管理员',
        avatar: ''
      },
      activePath: '/dashboard',
      menuItems: [
        // {
        //   title: '工作台',
        //   icon: 'el-icon-monitor',
        //   path: '/dashboard',
        //   component: ServiceArea
        // },
        {
          title: '服务区域管理',
          icon: 'el-icon-location-outline',
          path: '/ServiceArea',
          component: ServiceArea
        },
        {
          title: '服务点位管理',
          icon: 'el-icon-location-information',
          path: '/DeliveryPoints',
          component: DeliveryPoints
        },
        {
          title: '合作商家管理',
          icon: 'el-icon-office-building',
          path: '/MerchantPage',
          component: MerchantPage
        },
        {
          title: '商品管理',
          icon: 'el-icon-goods',
          path: '/GoodPage',
          component: GoodPage
        },
        {
          title: '订单管理',
          icon: 'el-icon-tickets',
          path: '/OrderPage',
          component: OrderPage
        },
        {
          title: '账单管理',
          icon: 'el-icon-money',
          path: '/BillPage',
          component: BillPage
        },
        {
          title: '用户管理',
          icon: 'el-icon-user',
          path: '/UserPage',
          component: UserPage
        },
        {
          title: '系统管理',
          icon: 'el-icon-set-up',
          path: '/product',
          children: [
            {
              title: '账户管理',
              icon: 'el-icon-user-solid',
              path: '/product/list',
              component: MgmtUserPage
            },
            {
              title: '角色管理',
              icon: 'el-icon-s-custom',
              path: '/RolePage',
              component: RolePage
            }
          ]
        }
      ]
    }
  },
  computed: {
    currentMenu() {
      return this.findMenuByPath(this.menuItems, this.activePath) || this.menuItems[0]
    }
  },
  methods: {
    goProfile() {
      this.$router.push('/profile')
    },
    logout() {
      localStorage.setItem('token', null)
      // 登出逻辑
      this.$router.push('/login')
    },
    changeMenu(path) {
      this.activePath = path
    },
    findMenuByPath(menus, path) {
      for (const menu of menus) {
        if (menu.path === path) return menu
        if (menu.children) {
          const found = this.findMenuByPath(menu.children, path)
          if (found) return found
        }
      }
      return null
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  display: flex;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

::v-deep .el-dropdown-menu__item {
  text-align: center;
  justify-content: center; /* 兼容flex布局 */
}

/* 左侧菜单样式 */
.sidebar {
  width: 220px;
  background: #304156;
  z-index: 10000; /* 确保菜单在最上层 */
  color: #fff;
  transition: all 0.3s;
}

.logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu {
  list-style: none;
  padding-left: 0;
}

/* 右侧内容区样式 */
.main-content {
  flex: 1;
  background: #f0f2f5;
}

.header {
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.content {
  padding: 20px;
  min-height: calc(100vh - 60px);
}

.sidebar {
  position: fixed;
  width: 220px;
  height: 100vh;
  overflow-y: auto; /* 允许菜单内容滚动 */
}

.main-content {
  margin-left: 220px; /* 为右侧内容添加左侧边距 */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  border-bottom: 1px solid #eee;
}

.user-profile {
  display: flex;
  align-items: center;
}

.user-avatar {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-name {
  margin-left: 10px;
  font-size: 14px;
}

.el-dropdown-menu {
  min-width: 100px;
}

</style>
